<!--  -->
<template>
<div class=''>
  <h2>产品列表</h2>
  <ul>
    <li v-for = '(item) in lists'
    :key = 'item.id'>
      <div>{{item.title}}</div>
      <button @click = 'addToCarts(item)'>添加到购物车中</button>
    </li>
  </ul>
</div>
</template>
<script>
import { getProducts } from './../api/shop'// 解构赋值
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      lists: getProducts()
    }
  },
  methods: {
    addToCarts (product) {
      this.$store.commit('Cart/addToCarts', product)
    }
  }
}
</script>
<style  scoped>

</style>
